<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }
    
    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>

</head>
<body>

<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">深圳</option>
  <option value="4">广州</option>
  <option value="5">西红柿</option>
</select>
<div class="btn-box">
  <!--实体字符-->
  <button id="btn-sel-all"> &gt;&gt;</button>
  <button id="btn-sel-none"> &lt;&lt;</button>
  <button id="btn-sel"> &gt;</button>
  <button id="btn-back"> &lt;</button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>

  /**
   *  点击全部移动按钮，要么从左边到右边（所有的下拉列表）；要么从右边到左边
   *  点击 > 左边被选中的下拉列表会被移动到右边
   *  点击 < 右边被选中的下拉列表会被移动到左边
   */

  $(function () {
    //先获取全选 >> 按钮并且注册点击事件
    $("#btn-sel-all").click(function () {
      //找到左边的全部内容，直接移动到右边
      $("#src-city").children().appendTo($("#tar-city"));
    });
    //先获取全选 << 按钮并且注册点击事件
    $("#btn-sel-none").click(function () {
      //找到右边的全部内容，直接移动到左边
      $("#tar-city").children().appendTo($("#src-city"));
    });
    //找到 > 按钮并且注册点击事件
    $("#btn-sel").click(function () {
      //找到选中的内容，并且移动到右边
      $("#src-city > option:selected").appendTo($("#tar-city"));
    });
    //找到 < 按钮并且注册点击事件
    $("#btn-back").click(function () {
      //找到选中的内容，并且移动到左边
      $("#tar-city > option:selected").appendTo($("#src-city"));
    });
  });

</script>